import React, {
  Component,
  StyleSheet,
  Text,
  TextInput,
  View,
  ListView,
  TouchableOpacity,
  Image,
} from 'react-native';

var Title =require('./Title');
var query = require('./Query').query;
var SegmentedView =require('react-native-segmented-view');
var SearchBar = require('react-native-search-bar');
var THUMB_URLS = [
    require('../../icon/addresslist.png'),
    require('../../icon/di-record.png'),
    require('../../icon/courselist.png'),
    require('../../icon/askforleave.png'),
];

// var dataList = {teacher:[{name:'高明明'},{name:'李青'}],parent:[{name:'高明'},{name:'李青理'}]};
class Address extends Component {
  constructor(props){
    super(props);

    this.dataList = {};

    this.ds = new ListView.DataSource({
      getRowData:(dataBlob,sectionID,rowID)=>{
        return dataBlob[sectionID][rowID];
      },
      getSectionHeaderData:(dataBlob,sectionID)=>{
        return dataBlob[sectionID];
      },
      rowHasChanged: (r1, r2) => r1 !== r2,
      sectionHeaderHasChanged:(s1,s2) => s1 !== s2
    });
    this.state = {
      showsCancelButton:false,
      selectedIndex:0,
      searchText:'',
      dataSource:this.ds.cloneWithRowsAndSections(this.dataList,[],[]),
    };
  }

  componentDidMount(){
    this.dataList = {};
    query.getUserList(this.props.user.phone,this,function(owner,response){
      if(response.success === true){
        owner.dataList = response.message;
        owner._updateLiswView();}})
  }

  _updateLiswView(){
    let sectionIDs = Object.keys(this.dataList);
    let rowIDs = sectionIDs.map(sectionID => {
      let count = this.dataList[sectionID].length;
      let thisRow = [];
      for(let i = 0; i < count; i++){
        thisRow.push(i);
      }
      return thisRow;
    });
    this.setState({dataSource:this.ds.cloneWithRowsAndSections(this.dataList,sectionIDs,rowIDs)});
  }

  onReturn(){
    this.props.navigator.pop();
  }

  _onPressRow(rowData){
    this.props.navigator.push({name:'ChatScreen',params:{myside:this.props.user,yourside:rowData,yourPicture:rowData.imgUrl}});
  }

  _renderSectionHeader(sectionData,sectionID){
    let role = sectionID === 'teacher' ? '老师' : '家长';
    return (
      <View style={styles.sectionHeader}>
        <Text style={styles.setionHeaderText}>
          {role}
        </Text>
      </View>
    );
  }

  _renderRow(rowData,sectionID,rowID){
    return (
      <View style={styles.rowView}>
        <TouchableOpacity style={styles.listRow} onPress = {()=>{this._onPressRow(rowData);}}>
          <Image style={styles.avatar} source={{uri:rowData.imgUrl,isStatic: true}}/>
          <Text style={styles.rowText}>
            {rowData.name}
          </Text>
        </TouchableOpacity>
      </View>
    );
  }

  _renderSeparator(sectionID, rowID, adjacentRowHighlighted){
    return(
      <View style={styles.separatorView} key={"sectionID_"+sectionID+"_rowID_"+rowID}>
      </View>
    )
  }

  _onPressSegment(index){
    this.setState({selectedIndex: index});
  }

  _renderTitle(title: any, index:number){
    return(
      <View style={{alignItems:'center'}}>
        <Image style={styles.thumb} source={THUMB_URLS[index]} />
        <Text style={{marginTop:5,fontSize:12,color:'#aaa'}}>{title}</Text>
      </View>
    )
  }

  _onSearchButtonPress(){
    
  }

  _onCancelButtonPress(){
  
  }

  _onChangeText(value){
  }

  render() {
    return(
      <View style={styles.container}>
        <Title title={{left:"返回",center:"通讯录",leftAct:this.onReturn.bind(this)}}></Title>

        <SearchBar
          ref='searchBar'
          placeholder='搜索'
          hideBackground={true}
          onCancelButtonPress={this._onCancelButtonPress.bind(this)}
          onSearchButtonPress={this._onSearchButtonPress.bind(this)}
          onChangeText={this._onChangeText.bind(this)}
          onFocus={() => this.setState({showsCancelButton: true})}
          showsCancelButton={this.state.showsCancelButton}
        />

        <SegmentedView
              titles={['深圳高级中学','南山外国语学校','深圳中学','深圳高级中学']}
              index={this.state.selectedIndex}
              stretch={true}
              renderTitle={this._renderTitle.bind(this)}
              barPosition={'bottom'}
              onPress={this._onPressSegment.bind(this)}
              style={{flex:0,marginTop:15}}/>

        <ListView style={styles.addressList}
          dataSource={this.state.dataSource}
          renderSeparator={this._renderSeparator.bind(this)}
          renderRow={this._renderRow.bind(this)}
          renderSectionHeader={this._renderSectionHeader.bind(this)}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container:{
    backgroundColor:'#eeeeee',
    flex:1,
  },
  addressList:{
    marginTop:10,
  },
  searchInput:{
    backgroundColor:'#fff',
    marginTop:10,
    marginLeft:50,
    marginRight:50,
    height:30,
    fontSize:14,
    color:'#bbbbbb',
  },
  sectionHeader:{
    height:28,
    justifyContent:'center',
    backgroundColor:'#ddd',
  },
  setionHeaderText:{
    marginLeft:40,
    fontSize:16,
  },
  rowView:{
    height:55,
    justifyContent:'center',
    backgroundColor:'#fff',
  },
  rowText:{
    marginLeft:15,
    fontSize:18,
    color:'gray',
  },
  separatorView:{
    height:1,
    backgroundColor:'#eee',
  },
  avatar: {
    marginLeft:20,
    borderRadius:20,
    width: 40,
    height: 40
  },
  listRow:{
    flexDirection:'row',
    alignSelf:'stretch',
    flex: 1,
    height:60,
    backgroundColor: 'white',
    padding: 10,
    marginVertical: 5,
    alignItems:'center',
  },
});

module.exports = Address;
